<!--
 * @Author: krsea 965837746@qq.com
 * @Date: 2025-03-02 20:30:33
 * @LastEditors: krsea 965837746@qq.com
 * @LastEditTime: 2025-03-02 20:46:10
 * @FilePath: \2306\week3t\4. 组件间数据传递（props） copy.html
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>组件间数据传递</title>
</head>
<body>
    <div id="app">
        <parent-component :message="parentMessage"></parent-component>
    </div>
    <!-- <div>
        <div>1{{ message }}</div>
        <div>2{{ parentMessage }}</div>
    </div> -->

    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script>
        // 子组件
        var ChildComponent = {
            props: ['message'],
            template: '<div>3子组件中：{{ message }}</div>'
        };

        // 父组件    // props: ['message'] 形参
        Vue.component('parent-component', {
            props: ['message'],
            components: {
                'child-component': ChildComponent
            },
            data: function() {
                return {
                    parentMessage: '来自父组件的数据'
                }
            },
            template: '<div><div>1父组件中的message：{{ message }}</div><div>1父组件中的 parentMessage：{{ parentMessage }}</div><child-component :message="message"></child-component></div>'
        });

        var app = new Vue({
            el: '#app',
            data: {
                parentMessage: '来自根实例的数据'
            }
        });
    </script>
</body>
</html>
